<script setup lang='ts'>
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { shortcuts, disabledDate } from '../../../utils/time';
import type { StoryItem } from '../../../apis/story/type';
import StatusDialog from './statusDialog.vue'
import { formatDate } from '../../../utils/time'
import { ElMessageBox, ElMessage } from 'element-plus';
import { reqUpdateProjectStoryBystory } from '../../../apis/story';
import { watch } from 'vue';
import { formatDateISOS } from '../../../utils/time';
import type { ProjectMember } from '../../../apis/project/type';
import useUserStore from '../../../store/modules/user';

const useUser = useUserStore()
const detailVisible = defineModel('detailVisible')
const props = defineProps<{
  rowData: StoryItem,
  memberList: ProjectMember[]
}>()
const dialogVisible = ref(false)
const emit = defineEmits(['prev-row', 'next-row', 'refresh'])
let localData = ref<StoryItem>(JSON.parse(JSON.stringify(props.rowData)))
let editMode = ref<boolean>(false)

const handlerPrev = () => {
  emit('prev-row')
}

const handlerNext = () => {
  emit('next-row')
}

const updateDetail = async () => {
  ElMessageBox.confirm(`确定要更新事项 ${localData.value.title} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  }).then(async () => {
    let assigneeIds = localData.value.assignees ? localData.value.assignees.map((item: any) => item.id) : []
    const res = await reqUpdateProjectStoryBystory(localData.value.projectId, localData.value.id, {
      title: localData.value.title,
      description: localData.value.description,
      priority: localData.value.priority,
      assigneeIds: assigneeIds,
      versionId: null,
      parentId: null,
      endsAt: formatDateISOS(localData.value.endsAt)
    })
    if (res.code === 200) {
      ElMessage.success('更新成功')
      emit('refresh')
      detailVisible.value = false
    }
  })
}

const getStatusText = (status: string) => {
  const statusTextMap: Record<string, string> = {
    'new': '新建',
    'in-progress': '实现中',
    'completed': '已实现',
    'rejected': '已拒绝'
  }
  return statusTextMap[status as keyof typeof statusTextMap] || status
}

const haveRight = (id: number) => {
  const adminList = props.memberList.filter(item => item.projectRole === 'admin')
  return adminList.find(item => item.id === id) || useUser.role === 'admin'
}

watch(() => props.rowData, (newVal) => {
  localData.value = JSON.parse(JSON.stringify(newVal))
}, { deep: true })
</script>


<template>
  <el-drawer v-model="detailVisible" direction="rtl" class="detail" size="40%">
    <template #header>
      <div class="detail_header">
        <el-button type="default" :icon="ArrowUp" circle @click="handlerPrev"></el-button>
        <el-button type="default" :icon="ArrowDown" circle @click="handlerNext"></el-button>
        <el-divider />
      </div>
    </template>
    <template #default>
      <div class="detail_title">
        {{ localData.type === 'requirement' ? '需求' : '缺陷' }}: <span v-if="!editMode" @click="editMode = true">{{
          localData.title }}</span>
        <input v-else v-model="localData.title" placeholder="请输入需求标题" class="input"
          style="width: 80%;border-bottom: 1px solid #fff;" @blur="editMode = false"
          @keyup.enter.native="editMode = false" />
      </div>
      <div class="detail_message">
        <span class="msg">基本信息</span>
        <el-form :inline="true" :model="localData">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1743131692243" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5277" width="16" height="16">
                    <path
                      d="M855.905072 188.394764 168.095951 188.394764c-56.456826 0-102.389972 45.932122-102.389972 102.388948l0 442.434621c0 56.455803 45.932122 102.386902 102.389972 102.386902l687.810145 0c56.456826 0 102.387925-45.931099 102.387925-102.386902L958.294021 290.783713C958.292997 234.326886 912.361899 188.394764 855.905072 188.394764zM919.301961 473.036593l0 40.831964 0 191.272301 0 19.61678 0 8.460696c0 34.95614-28.440749 63.396889-63.396889 63.396889L168.095951 796.615223c-34.958186 0-63.397912-28.440749-63.397912-63.396889l0-8.460696 0-19.61678L104.698039 513.868557 104.698039 473.036593 104.698039 290.783713c0-34.957163 28.439726-63.397912 63.397912-63.397912l687.810145 0c34.95614 0 63.396889 28.440749 63.396889 63.397912L919.302985 473.036593z"
                      fill="#999999" p-id="5278"></path>
                    <path
                      d="M525.806959 437.118546c-9.689686-22.908756-23.558555-43.48028-41.221844-61.143569-17.666358-17.666358-38.237883-31.532157-61.145615-41.22389-23.723308-10.034541-48.917106-15.122419-74.883501-15.122419-25.967418 0-51.160193 5.088902-74.882478 15.122419-22.909779 9.691733-43.481304 23.557532-61.144592 41.22389-17.665335 17.664312-31.533181 38.235836-41.22389 61.143569-10.034541 23.723308-15.120372 48.917106-15.120372 74.883501 0 25.966395 5.086855 51.160193 15.120372 74.882478 9.69071 22.907733 23.558555 43.481304 41.22389 61.145615 17.663288 17.666358 38.235836 31.532157 61.144592 41.22389 23.721261 10.033517 48.91506 15.119349 74.882478 15.119349 25.966395 0 51.160193-5.086855 74.882478-15.119349 22.908756-9.691733 43.481304-23.561625 61.145615-41.22389 17.662265-17.664312 31.533181-38.237883 41.222867-61.145615 10.034541-23.723308 15.120372-48.916083 15.120372-74.882478C540.928355 486.035652 535.841499 460.841853 525.806959 437.118546zM292.100196 431.300027l0.165776 0c0-31.140231 25.328875-56.458873 56.456826-56.458873 31.140231 0 56.45785 25.318642 56.45785 56.458873l-0.166799 0 0 65.850777 0.166799 0c0 31.139208-25.317619 56.45478-56.45785 56.45478-31.128975 0-56.456826-25.316595-56.456826-56.45478l-0.165776 0L292.100196 431.300027zM416.566976 673.009044c-21.536502 9.105379-44.418652 13.724583-68.010977 13.724583-23.593348 0-46.475498-4.619204-68.010977-13.724583-20.271696-8.576329-38.525432-20.767999-54.295604-36.233226 0.525979-42.947138 23.344684-80.555687 57.348126-101.978603 13.033851 22.470781 37.281091 37.644365 65.125253 37.644365 27.785833 0 51.990095-15.108093 65.035202-37.490869 33.871435 21.445428 56.58167 58.986439 57.107649 101.82306C455.093431 652.238998 436.840718 664.432715 416.566976 673.009044z"
                      fill="#999999" p-id="5279"></path>
                    <path
                      d="M766.156002 659.270135 682.292989 659.270135 682.292989 362.011964l83.863013 0c59.268872 0 107.48706 48.219211 107.48706 107.488083l0 82.283028C873.643062 611.051947 825.424874 659.270135 766.156002 659.270135zM723.225237 618.337887l42.930765 0c36.697807 0 66.554812-29.857005 66.554812-66.554812l0-82.283028c0-36.69883-29.857005-66.555835-66.554812-66.555835L723.225237 402.944212 723.225237 618.337887z"
                      fill="#999999" p-id="5280"></path>
                    <path d="M591.734484 362.012987l40.932248 0 0 296.744471-40.932248 0 0-296.744471Z" p-id="5281">
                    </path>
                  </svg>
                  <span>ID:</span>
                </template>
                <span>{{ localData.id }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1742979143025" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3424" width="16" height="16">
                    <path
                      d="M511.4 482.7c104.9 0 189.2-85.2 189.2-189.2 0-104-84.4-190.1-189.2-190.1-104.9 0-189.2 85.2-189.2 190.1 0 104.8 84.4 189.2 189.2 189.2z m0-330.2c77.8 0 140.1 63.1 140.1 140.1s-62.3 140.9-140.1 140.9-140.1-63.1-140.1-140.1c0.1-77 62.3-140.9 140.1-140.9z m0 383.4c-197.4 0-358 160.6-358 358.8 0 13.9 10.6 24.6 24.6 24.6 13.9 0 24.6-10.6 24.6-24.6C202.6 724.3 341 585 511.4 585s308.8 139.3 308.8 309.7c0 13.9 10.6 24.6 24.6 24.6 13.9 0 24.6-10.6 24.6-24.6 0-198.2-160.5-358.8-358-358.8z m0 0"
                      fill="#999999" p-id="3425"></path>
                  </svg>
                  <span>处理人: </span>
                </template>
                <el-select v-model="localData.assignees" size="default" multiple collapse-tags collapse-tags-tooltip
                  placeholder="请选择处理人" style="width: 150px;" value-key="id">
                  <el-option v-for="item in props.memberList" :key="item.id" :label="item.username" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1742979143025" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3424" width="16" height="16">
                    <path
                      d="M511.4 482.7c104.9 0 189.2-85.2 189.2-189.2 0-104-84.4-190.1-189.2-190.1-104.9 0-189.2 85.2-189.2 190.1 0 104.8 84.4 189.2 189.2 189.2z m0-330.2c77.8 0 140.1 63.1 140.1 140.1s-62.3 140.9-140.1 140.9-140.1-63.1-140.1-140.1c0.1-77 62.3-140.9 140.1-140.9z m0 383.4c-197.4 0-358 160.6-358 358.8 0 13.9 10.6 24.6 24.6 24.6 13.9 0 24.6-10.6 24.6-24.6C202.6 724.3 341 585 511.4 585s308.8 139.3 308.8 309.7c0 13.9 10.6 24.6 24.6 24.6 13.9 0 24.6-10.6 24.6-24.6 0-198.2-160.5-358.8-358-358.8z m0 0"
                      fill="#999999" p-id="3425"></path>
                  </svg>
                  <span>创建人: </span>
                </template>
                <span>{{ localData.createdBy.username }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1743131404473" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1717" width="16" height="16">
                    <path
                      d="M512 929.959184c-230.4 0-417.959184-187.559184-417.959184-417.959184s187.559184-417.959184 417.959184-417.959184 417.959184 187.559184 417.959184 417.959184-187.559184 417.959184-417.959184 417.959184z m0-794.122449c-207.412245 0-376.163265 168.75102-376.163265 376.163265s168.75102 376.163265 376.163265 376.163265 376.163265-168.75102 376.163265-376.163265-168.75102-376.163265-376.163265-376.163265z"
                      fill="#999999" p-id="1718"></path>
                    <path
                      d="M718.367347 538.122449h-208.979592c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.897959h208.979592c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959z"
                      fill="#999999" p-id="1719"></path>
                    <path
                      d="M509.387755 538.122449c-11.493878 0-20.897959-9.404082-20.897959-20.897959V256c0-11.493878 9.404082-20.897959 20.897959-20.897959s20.897959 9.404082 20.897959 20.897959v261.22449c0 11.493878-9.404082 20.897959-20.897959 20.897959z"
                      fill="#999999" p-id="1720"></path>
                  </svg>
                  <span>创建时间: </span>
                </template>
                <span>{{ formatDate(localData.createdAt) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1743131639562" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2319" width="16" height="16">
                    <path
                      d="M741.504 485.824h-242.56c-11.456 0-20.736 10.688-20.736 24 0 13.248 9.28 24 20.736 24h242.56c11.392 0 20.672-10.752 20.672-24s-9.28-24-20.672-24zM843.904 339.328h-344.96c-11.456 0-20.736 10.752-20.736 24s9.28 24 20.736 24h344.832c11.52 0 20.672-10.752 20.672-24s-9.216-24-20.544-24zM680.064 632.384h-181.12c-11.456 0-20.736 10.688-20.736 24 0 13.248 9.28 24 20.736 24h181.12c11.456 0 20.672-10.752 20.672-24 0-13.312-9.216-24-20.672-24zM608.448 768.512h-109.44c-11.456 0-20.736 10.816-20.736 24 0 13.312 9.28 24 20.736 24h109.44c11.456 0 20.672-10.688 20.672-24 0-13.184-9.216-24-20.672-24zM307.392 198.464L172.864 351.168h113.92v482.816h41.6V351.168h113.6L307.392 198.464z"
                      fill="#999999" p-id="2320"></path>
                  </svg>
                  <span>当前状态: </span>
                </template>
                <el-button :type="localData.status === 'new' ? 'primary' :
                  localData.status === 'in-progress' ? 'warning' :
                    localData.status === 'completed' ? 'success' :
                      'danger'" size="small" plain round @click="dialogVisible = true">{{
                        getStatusText(localData.status)
                      }}</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1743131639562" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2319" width="16" height="16">
                    <path
                      d="M741.504 485.824h-242.56c-11.456 0-20.736 10.688-20.736 24 0 13.248 9.28 24 20.736 24h242.56c11.392 0 20.672-10.752 20.672-24s-9.28-24-20.672-24zM843.904 339.328h-344.96c-11.456 0-20.736 10.752-20.736 24s9.28 24 20.736 24h344.832c11.52 0 20.672-10.752 20.672-24s-9.216-24-20.544-24zM680.064 632.384h-181.12c-11.456 0-20.736 10.688-20.736 24 0 13.248 9.28 24 20.736 24h181.12c11.456 0 20.672-10.752 20.672-24 0-13.312-9.216-24-20.672-24zM608.448 768.512h-109.44c-11.456 0-20.736 10.816-20.736 24 0 13.312 9.28 24 20.736 24h109.44c11.456 0 20.672-10.688 20.672-24 0-13.184-9.216-24-20.672-24zM307.392 198.464L172.864 351.168h113.92v482.816h41.6V351.168h113.6L307.392 198.464z"
                      fill="#999999" p-id="2320"></path>
                  </svg>
                  <span>优先级: </span>
                </template>
                <el-radio-group v-model="localData.priority">
                  <el-radio value="high">高</el-radio>
                  <el-radio value="medium">中</el-radio>
                  <el-radio value="low">低</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1742979188747" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5414" width="16" height="16">
                    <path
                      d="M128 213.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V256a42.666667 42.666667 0 0 0-42.666667-42.666667H128z m0-42.666666h768a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H128a85.333333 85.333333 0 0 1-85.333333-85.333334V256a85.333333 85.333333 0 0 1 85.333333-85.333333z"
                      fill="#999999" p-id="5415"></path>
                    <path
                      d="M42.666667 384m21.333333 0l896 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333334l-896 0q-21.333333 0-21.333333-21.333334l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#999999" p-id="5416"></path>
                    <path
                      d="M170.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#999999" p-id="5417"></path>
                    <path
                      d="M426.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#999999" p-id="5418"></path>
                    <path
                      d="M682.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#999999" p-id="5419"></path>
                    <path
                      d="M170.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                      fill="#999999" p-id="5420"></path>
                    <path
                      d="M426.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                      fill="#999999" p-id="5421"></path>
                    <path
                      d="M682.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                      fill="#999999" p-id="5422"></path>
                    <path
                      d="M256 85.333333m21.333333 0l0 0q21.333333 0 21.333334 21.333334l0 170.666666q0 21.333333-21.333334 21.333334l0 0q-21.333333 0-21.333333-21.333334l0-170.666666q0-21.333333 21.333333-21.333334Z"
                      fill="#999999" p-id="5423"></path>
                    <path
                      d="M725.333333 85.333333m21.333334 0l0 0q21.333333 0 21.333333 21.333334l0 170.666666q0 21.333333-21.333333 21.333334l0 0q-21.333333 0-21.333334-21.333334l0-170.666666q0-21.333333 21.333334-21.333334Z"
                      fill="#999999" p-id="5424"></path>
                  </svg>
                  <span>预计结束: </span>
                </template>
                <el-date-picker v-model="localData.endsAt" type="date" placeholder="Pick a day"
                  :disabled-date="disabledDate" :shortcuts="shortcuts" style="width: 150px;" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="detail_content">
        <span class="msg">内容</span>
        <el-input v-model="localData.description" type="textarea" rows="10" style="margin-top: 10px;"></el-input>
      </div>
    </template>
    <template #footer>
      <el-button type="primary" style="margin-right: 20px;" @click="updateDetail"
        v-if="haveRight(useUser.id as number)">保存修改</el-button>
    </template>
  </el-drawer>
  <StatusDialog v-model:dialogVisible="dialogVisible" :rowData="props.rowData" :memberList="props.memberList">
  </StatusDialog>
</template>


<style scoped lang='scss'>
.detail {
  .detail_header {
    padding-bottom: 10px;
    margin-bottom: -20px;
  }

  .detail_title {
    display: flex;
    font-weight: 600;
    font-size: 20px;
    margin-left: 20px;
  }

  .detail_message {
    margin: 20px 0 20px 20px;

    .msg {
      color: #666;
      font-weight: 600;
    }


    .icon {
      margin: 8px 5px 0 0;
    }
  }

  .detail_content {
    margin: 20px;

    .msg {
      color: #666;
      font-weight: 600;
    }
  }
}
</style>